Pruebas de componentes React: Dominar las pruebas de instantáneas e integración

En el mundo del desarrollo web moderno, garantizar la fiabilidad y solidez de su interfaz de usuario (UI) es primordial. React, una biblioteca de JavaScript popular para construir interfaces de usuario, proporciona a los desarrolladores una arquitectura basada en componentes. Probar a fondo estos componentes es crucial para ofrecer una experiencia de usuario de alta calidad. Este artículo profundiza en dos estrategias de prueba esenciales: las pruebas de instantáneas y las pruebas de integración, proporcionando ejemplos prácticos y las mejores prácticas para ayudarle a dominar las pruebas de componentes React.

¿Por qué probar los componentes React?

Antes de profundizar en los detalles de las pruebas de instantáneas y las pruebas de integración, primero comprendamos por qué probar los componentes React es tan importante:

• Prevenir regresiones: Las pruebas pueden ayudar a detectar cambios inesperados en el comportamiento de sus componentes, evitando que las regresiones se cuelen en su base de código.
• Mejorar la calidad del código: Escribir pruebas le anima a pensar en el diseño y la estructura de sus componentes, lo que conduce a un código más limpio y fácil de mantener.
• Aumentar la confianza: Tener un conjunto de pruebas completo le da confianza al hacer cambios en su código, sabiendo que será alertado si algo se rompe.
• Facilitar la colaboración: Las pruebas sirven como documentación para sus componentes, lo que facilita que otros desarrolladores comprendan y trabajen con su código.

Pruebas de instantáneas

¿Qué son las pruebas de instantáneas?

Las pruebas de instantáneas implican renderizar un componente React y comparar su salida (una instantánea) con una instantánea guardada previamente. Si hay alguna diferencia, la prueba falla, lo que indica un posible problema. Es como tomar una "foto" de la salida de su componente y asegurarse de que no cambie inesperadamente.

Las pruebas de instantáneas son particularmente útiles para verificar que su interfaz de usuario no haya cambiado de forma no intencionada. A menudo se utiliza para detectar cambios en el estilo, el diseño o la estructura general de sus componentes.

Cómo implementar pruebas de instantáneas

Utilizaremos Jest, un popular marco de pruebas de JavaScript, y Enzyme (o React Testing Library - vea a continuación) para demostrar las pruebas de instantáneas.

Ejemplo con Jest y Enzyme (Aviso de desaprobación):

Nota: Enzyme es considerado obsoleto por muchos a favor de React Testing Library. Si bien este ejemplo demuestra el uso de Enzyme, recomendamos React Testing Library para nuevos proyectos.

Primero, instale Jest y Enzyme:

            npm install --save-dev jest enzyme enzyme-adapter-react-16
npm install --save react-test-renderer

            

              
                Copy
              
            
          

Reemplace `react-adapter-react-16` con el adaptador apropiado para su versión de React.

Cree un componente React simple (por ejemplo, Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hola, {name}!</h1>;
}

export default Greeting;

            

              
                Copy
              
            
          

Ahora, cree una prueba de instantánea (por ejemplo, Greeting.test.js):

            import React from 'react';
import { shallow } from 'enzyme';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  it('renders correctamente', () => {
    const wrapper = shallow(<Greeting name="World" />);
    expect(wrapper).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Ejecute la prueba usando Jest:

            npm test

            

              
                Copy
              
            
          

La primera vez que ejecute la prueba, Jest creará un archivo de instantánea (por ejemplo, __snapshots__/Greeting.test.js.snap) que contiene la salida renderizada del componente Greeting.

Las ejecuciones de prueba subsiguientes compararán la salida actual con la instantánea guardada. Si coinciden, la prueba pasa. Si difieren, la prueba falla y deberá revisar los cambios y actualizar la instantánea o corregir el componente.

Ejemplo con Jest y React Testing Library:

React Testing Library es un enfoque más moderno y recomendado para probar componentes React. Se enfoca en probar el componente desde la perspectiva del usuario, en lugar de enfocarse en los detalles de implementación.

Primero, instale Jest y React Testing Library:

            npm install --save-dev @testing-library/react @testing-library/jest-dom jest

            

              
                Copy
              
            
          

Modifique la prueba de instantánea (por ejemplo, Greeting.test.js):

            import React from 'react';
import { render } from '@testing-library/react';
import Greeting from './Greeting';
import '@testing-library/jest-dom/extend-expect';

describe('Greeting Component', () => {
  it('renders correctamente', () => {
    const { asFragment } = render(<Greeting name="World" />);
    expect(asFragment()).toMatchSnapshot();
  });
});

            

              
                Copy
              
            
          

Ejecute la prueba usando Jest:

            npm test

            

              
                Copy
              
            
          

La primera vez que ejecute la prueba, Jest creará un archivo de instantánea (por ejemplo, __snapshots__/Greeting.test.js.snap) que contiene la salida renderizada del componente Greeting.

Las ejecuciones de prueba subsiguientes compararán la salida actual con la instantánea guardada. Si coinciden, la prueba pasa. Si difieren, la prueba falla y deberá revisar los cambios y actualizar la instantánea o corregir el componente.

Mejores prácticas para las pruebas de instantáneas

• Tratar las instantáneas como código: Confíe sus archivos de instantáneas en su sistema de control de versiones (por ejemplo, Git) como cualquier otro archivo de código.
• Revisar los cambios cuidadosamente: Cuando una prueba de instantánea falla, revise cuidadosamente los cambios en el archivo de instantánea para determinar si son intencionales o indican un error.
• Actualizar las instantáneas intencionalmente: Si los cambios son intencionales, actualice el archivo de instantánea para reflejar la nueva salida esperada.
• No abusar de las instantáneas: Las pruebas de instantáneas son más adecuadas para componentes con interfaces de usuario relativamente estables. Evite usarlas para componentes que cambian con frecuencia, ya que pueden generar muchas actualizaciones de instantáneas innecesarias.
• Considerar la legibilidad: A veces, los archivos de instantáneas pueden ser difíciles de leer. Use herramientas como Prettier para formatear sus archivos de instantáneas para una mejor legibilidad.

Cuándo usar pruebas de instantáneas

Las pruebas de instantáneas son más efectivas en los siguientes escenarios:

• Componentes simples: Probar componentes simples con una salida predecible.
• Bibliotecas de interfaz de usuario: Verificar la consistencia visual de los componentes de la interfaz de usuario en diferentes versiones.
• Pruebas de regresión: Detectar cambios no deseados en los componentes existentes.

Pruebas de integración

¿Qué son las pruebas de integración?

Las pruebas de integración implican probar cómo múltiples componentes trabajan juntos para lograr una funcionalidad específica. Verifica que las diferentes partes de su aplicación interactúen correctamente y que el sistema general se comporte como se espera.

A diferencia de las pruebas unitarias, que se enfocan en componentes individuales de forma aislada, las pruebas de integración se enfocan en las interacciones entre componentes. Esto ayuda a garantizar que su aplicación funcione correctamente en su conjunto.

Cómo implementar pruebas de integración

Nuevamente, usaremos Jest y React Testing Library para demostrar las pruebas de integración.

Creemos una aplicación simple con dos componentes: Input y Display. El componente Input permite al usuario ingresar texto, y el componente Display muestra el texto ingresado.

Primero, cree el componente Input (por ejemplo, Input.js):

            import React, { useState } from 'react';

function Input({ onInputChange }) {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
    onInputChange(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
      placeholder="Ingresar texto..."
    />
  );
}

export default Input;

            

              
                Copy
              
            
          

A continuación, cree el componente Display (por ejemplo, Display.js):

            import React from 'react';

function Display({ text }) {
  return <p>Ingresaste: {text}</p>;
}

export default Display;

            

              
                Copy
              
            
          

Ahora, cree el componente App principal que integra los componentes Input y Display (por ejemplo, App.js):

            import React, { useState } from 'react';
import Input from './Input';
import Display from './Display';

function App() {
  const [inputText, setInputText] = useState('');

  const handleInputChange = (text) => {
    setInputText(text);
  };

  return (
    <div>
      <Input onInputChange={handleInputChange} />
      <Display text={inputText} />
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Cree una prueba de integración (por ejemplo, App.test.js):

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';
import '@testing-library/jest-dom/extend-expect';

describe('App Component', () => {
  it('actualiza la pantalla cuando cambia la entrada', () => {
    render(<App />);
    const inputElement = screen.getByPlaceholderText('Ingresar texto...');
    const displayElement = screen.getByText('Ingresaste: ');

    fireEvent.change(inputElement, { target: { value: '¡Hola, mundo!' } });

    expect(displayElement).toHaveTextContent('Ingresaste: ¡Hola, mundo!');
  });
});

            

              
                Copy
              
            
          

Ejecute la prueba usando Jest:

            npm test

            

              
                Copy
              
            
          

Esta prueba simula a un usuario escribiendo texto en el componente Input y verifica que el componente Display se actualice con el texto ingresado. Esto confirma que los componentes Input y Display están interactuando correctamente.

Mejores prácticas para las pruebas de integración

• Concéntrese en las interacciones clave: Identifique las interacciones más importantes entre los componentes y centre sus pruebas de integración en ellas.
• Usar datos realistas: Use datos realistas en sus pruebas de integración para simular escenarios del mundo real.
• Simular dependencias externas: Simule cualquier dependencia externa (por ejemplo, llamadas a API) para aislar sus componentes y hacer que sus pruebas sean más confiables. Bibliotecas como `msw` (Mock Service Worker) son excelentes para esto.
• Escribir pruebas claras y concisas: Escriba pruebas claras y concisas que sean fáciles de entender y mantener.
• Probar los flujos de usuarios: Concéntrese en probar los flujos de usuarios completos para asegurarse de que su aplicación se comporte como se espera desde la perspectiva del usuario.

Cuándo usar pruebas de integración

Las pruebas de integración son más efectivas en los siguientes escenarios:

• Componentes complejos: Probar componentes complejos que interactúan con otros componentes o sistemas externos.
• Flujos de usuarios: Verificar que los flujos de usuarios completos funcionen correctamente.
• Interacciones API: Probar la integración entre su frontend y las API de backend.

Pruebas de instantáneas frente a pruebas de integración: una comparación

Aquí hay una tabla que resume las principales diferencias entre las pruebas de instantáneas y las pruebas de integración:

Elegir la estrategia de prueba correcta

La mejor estrategia de prueba depende de las necesidades específicas de su proyecto. En general, es una buena idea usar una combinación de pruebas de instantáneas y pruebas de integración para asegurarse de que sus componentes React funcionen correctamente.

• Comience con las pruebas unitarias: Antes de sumergirse en las pruebas de instantáneas o integración, asegúrese de tener buenas pruebas unitarias para sus componentes individuales.
• Use pruebas de instantáneas para los componentes de la interfaz de usuario: Use pruebas de instantáneas para verificar la consistencia visual de sus componentes de la interfaz de usuario.
• Use pruebas de integración para interacciones complejas: Use pruebas de integración para verificar que sus componentes estén interactuando correctamente y que su aplicación se esté comportando como se espera.
• Considere las pruebas de extremo a extremo (E2E): Para flujos de usuarios críticos, considere agregar pruebas de extremo a extremo utilizando herramientas como Cypress o Playwright para simular las interacciones reales del usuario y verificar el comportamiento general de la aplicación.

Más allá de las pruebas de instantáneas y de integración

Si bien las pruebas de instantáneas y de integración son cruciales, no son los únicos tipos de pruebas que debe considerar para sus componentes React. Aquí hay algunas otras estrategias de prueba a tener en cuenta:

• Pruebas unitarias: Como se mencionó anteriormente, las pruebas unitarias son esenciales para probar componentes individuales de forma aislada.
• Pruebas de extremo a extremo (E2E): Las pruebas E2E simulan las interacciones reales del usuario y verifican el comportamiento general de la aplicación.
• Pruebas basadas en propiedades: Las pruebas basadas en propiedades implican definir propiedades que siempre deben ser verdaderas para sus componentes y luego generar entradas aleatorias para probar esas propiedades.
• Pruebas de accesibilidad: Las pruebas de accesibilidad garantizan que sus componentes sean accesibles para los usuarios con discapacidades.

Conclusión

Las pruebas son una parte integral de la construcción de aplicaciones React robustas y confiables. Al dominar las técnicas de pruebas de instantáneas e integración, puede mejorar significativamente la calidad de su código, prevenir regresiones y aumentar su confianza al realizar cambios. Recuerde elegir la estrategia de prueba correcta para cada componente y usar una combinación de diferentes tipos de pruebas para garantizar una cobertura completa. La incorporación de herramientas como Jest, React Testing Library y, posiblemente, Mock Service Worker (MSW) agilizará su flujo de trabajo de pruebas. Siempre priorice la escritura de pruebas que reflejen la experiencia del usuario. Al adoptar una cultura de pruebas, puede crear aplicaciones React de alta calidad que ofrezcan una gran experiencia de usuario a su audiencia global.